<template>
  <div class="back-top-wrapper">
    <div
      v-if="toggle"
      :class="{ 'back-top': true, 'show-back-top': visible }"
      @click="handleTo"
    />
    <div
      v-else
      :class="{ 'mini-back-top': true, 'show-mini-back-top': visible }"
      @click="handleTo"
    >
      <img
        alt="doraemon_to_top"
        title="返回顶部"
        src="http://img.cdn.ceart.top/img/Doraemon.png"
      >
      <!-- <span class="triangle" /> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'

const visible = ref(false)
const toggle = ref(false)

onMounted(async () => {
  handleResize()
  window.addEventListener('scroll', headershow)
  window.addEventListener('resize', handleResize)
})
onUnmounted(async () => {
  window.removeEventListener('scroll', headershow)
  window.addEventListener('resize', handleResize)
})

const handleTo = () => {
  scrollTo({ top: 0, behavior: 'smooth' })
}
const handleResize = () => {
  const { width } = document.documentElement.getBoundingClientRect()
  toggle.value = width > 1200
}
const headershow = () => {
  // 头部高度为70px
  const height = 70
  const offsetTop = window.pageYOffset || document.documentElement.scrollTop
  visible.value = offsetTop > height
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/constant.scss';

@keyframes move {
  0% {
    transform: translatey(0);
  }
  75% {
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(0);
  }
}
.back-top-wrapper {
  .back-top {
    position: fixed;
    top: -100%;
    right: 10px;
    z-index: 100;
    width: 100px;
    height: 85%;
    background: url('@/assets/images/back_top.webp') no-repeat bottom;
    cursor: pointer;
    transition: all 0.5s;
    animation: move 3s infinite linear;
    &.show-back-top {
      top: -100px;
      transition: all 0.5s;
    }
  }

  .mini-back-top {
    position: fixed;
    right: 30px;
    bottom: -50px;
    // width: 40px;
    // height: 40px;
    // border-radius: 50%;
    // background-color: $theme-color6;
    // box-shadow: 0 0 5px $theme-color2;
    text-align: center;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.5s;
    pointer-events: none;
    transform: scale(.85);

    &:hover {
      transform: scale(.95);
    }

    .triangle {
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      border: 7px solid transparent;
      border-bottom-color: $theme-color1;
      transform: translate(-50%, -90%);
    }
    &.show-mini-back-top {
      z-index: 100;
      opacity: 1;
      pointer-events: auto;
    }
  }
}
</style>
